<template>
  <div class="wrapper">
    <!-- <commonform
      :inline="false"
      :form="state.form"
      :labelAndType="state.labelAndType"
      :rules="state.rules"
    ></commonform> -->
    <!-- 权限 -->
    <el-checkbox :indeterminate="state.indeterminate" v-model="state.checkAll" @change="allChange">全选</el-checkbox>
    <template v-for="(item,parindex) in state.data">
      <div style="display: flex; border: 1px solid red; align-items: center">
        <div class="flexLeft" style="padding: 20px">
          <el-checkbox :indeterminate="item.indeterminate" v-model="item.selected" @change="oneLevelChange(parindex,item.id,$event)">{{ item.name }}</el-checkbox>
        </div>
        <div class="flexRight">
          <div v-for="(child,childindex) in item.children" :key="child.id">
            <el-checkbox :indeterminate="child.indeterminate" @change="secondChange(parindex,child.id,childindex,$event)" v-model="child.selected">{{ child.name }}</el-checkbox>
              <div style="display: flex; margin-left: 30px">
                <div v-for="(son,sonindex) in child.children">
                  <el-checkbox :label="son.name" @change="threeChange(parindex,childindex,son.id,sonindex,$event)"  :key="son.id" v-model="son.selected">{{
                    son.name
                  }}</el-checkbox>
                </div>
              </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import commonform from "@/components/Form.vue";
export default {
  name: "user",
  components: { commonform },
  props: {},
  setup() {
    let state = reactive({
      indeterminate: false,
      checkAll: false,
      checkedCities: [],
      form: {
        name: "",
      },
      labelAndType: [
        {
          model: "name",
          label: "姓名",
          type: "input",
        },
      ],
      rules: {
        name: [{ required: true, message: "11111", trigger: blur }],
      },
      data: [
        {
          id: 1,
          name: "库存系统",
          selected: false,
          indeterminate:false,
          children: [
            {
              id: 111,
              name: "订单管理",
              indeterminate:false,
              selected: false,
              children: [
                { id: 101, name: "创建订单", selected: false },
                { id: 102, name: "订单详情", selected: false },
                { id: 103, name: "删除订单", selected: false },
              ],
            },
          ],
        },
        {
          id: 222,
          name: "门店管理",
          indeterminate:false,
          selected: false,
          children: [
            {
              id: 2,
              name: "门店管理1",
              indeterminate:false,
              selected: false,
              children: [
                { id: 44, name: "创建门店1", selected: false },
                { id: 55, name: "编辑会员信息1", selected: false },
              ],
            },
            {
              id: 3,
              name: "门店管理2",
              selected: false,
              indeterminate:false,
              children: [
                { id: 66, name: "创建门店2", selected: false },
                { id: 77, name: "编辑会员信息2", selected: false },
              ],
            },
            {
              id: 4,
              name: "门店管理3",
              selected: false,
              indeterminate:false,
              children: [
                { id: 88, name: "创建门店3", selected: false },
                { id: 99, name: "编辑会员信息3", selected: false },
              ],
            },
          ],
        },
      ],
    });
    // 总开挂
    function allChange(e){
      if(e){
        state.indeterminate=false;
         let data=state.data;
          for(var i=0;i<data.length; i++){
              data[i].selected = e;
              for(var j=0; j<data[i].children.length; j++){
                  data[i].children[j].selected = e;
                  for(var s=0;s<data[i].children[j].children.length;s++){
                      data[i].children[j].children[s].selected=e;
                  }
              }
          }
      }else{
          let data=state.data;
          for(var i=0;i<data.length; i++){
              data[i].selected = e;
              for(var j=0; j<data[i].children.length; j++){
                  data[i].children[j].selected = e;
                  for(var s=0;s<data[i].children[j].children.length;s++){
                      data[i].children[j].children[s].selected=e;
                  }
              }
          }
      }
    }
    // 一级选择
    function oneLevelChange(index, topId, e){
            state.data[index].selected = e; //一级勾选后，子级全部勾选或者取消
            if(!e)state.data[index].indeterminate = false;  //去掉一级不确定状态
            var childrenArray = state.data[index].children;
            if(childrenArray.length){
                for(var i=0;i<childrenArray.length; i++){
                    childrenArray[i].selected = e;
                    childrenArray[i].children.forEach(v=>v.selected=e)
                }
            }
            getIsCheckAll()
    }
     //二级
     function secondChange(topIndex, sonId, childindex, e){//二级change事件
         state.data[topIndex].selected = e; //二级勾选后，子级全部勾选或者取消
         if(!e)state.data[topIndex].indeterminate = false;
          var childrenArray =state.data[topIndex].children;
          var tickCount = 0, unTickCount = 0, len = childrenArray.length;
          for(var i = 0; i < len; i++){
              if(sonId == childrenArray[i].id) childrenArray[i].selected = e
              if(childrenArray[i].selected == true) {
                  tickCount++;
                  childrenArray[i].children.forEach(v=>v.selected=true);
              }
              if(childrenArray[i].selected == false){
                  unTickCount++
                  childrenArray[i].children.forEach(v=>v.selected=false);
              }
          }
          if(tickCount == len) {//二级全勾选
              state.data[topIndex].selected = true
              state.data[topIndex].indeterminate = false
          } else if(unTickCount == len) {//二级全不勾选
              state.data[topIndex].selected = false
              state.data[topIndex].indeterminate = false
          } else {
              state.data[topIndex].selected = false
              state.data[topIndex].indeterminate = true //添加二级不确定状态
          }
          getIsCheckAll()
      }
      //三级
      function  threeChange(parindex,topIndex, topId,sonindex,e){
        console.log(parindex,topIndex, topId,sonindex,e)
          state.data[parindex].selected = e;
          state.data[parindex].children[topIndex].selected=e;
          console.log(state.data[parindex].children)
          if(!e){
              state.data[parindex].children[topIndex].indeterminate= false;
          }
          var childrenArray =state.data[parindex].children[topIndex].children;
          var tickCount = 0, unTickCount = 0, len = childrenArray.length;
          for(var i = 0; i < len; i++){
              if(topId == childrenArray[i].id) childrenArray[i].selected = e
              if(childrenArray[i].selected == true) {
                  tickCount++;
              }
              if(childrenArray[i].selected == false){
                  unTickCount++
              }
          }
          if(tickCount == len) {
              // state.data[topIndex].selected = true
              state.data[parindex].selected = true
              state.data[parindex].indeterminate = true
              state.data[parindex].children[topIndex].selected=true;
              state.data[parindex].children[topIndex].indeterminate=false;
          } else if(unTickCount == len) {
              state.data[parindex].selected = false
              state.data[parindex].indeterminate = false
              state.data[parindex].children[topIndex].selected=false;
              state.data[parindex].children[topIndex].indeterminate=false;
          } else {
              state.data[parindex].selected = false
              state.data[parindex].indeterminate = true
              state.data[parindex].children[topIndex].selected=false;
              state.data[parindex].children[topIndex].indeterminate=true;
          }
          getIsCheckAll()
      }
     function  getIsCheckAll(){
          var tickCount = 0, unTickCount = 0, ArrLength = state.data.length;
          for(var j=0; j<ArrLength; j++){//全选checkbox状态
              if(state.data[j].selected) tickCount++;
              if(!state.data[j].selected) unTickCount++;
          }
          if(tickCount == ArrLength) {//二级全勾选
              state.checkAll = true;
              state.indeterminate = false;
          } else if(unTickCount == ArrLength) {//二级全不勾选
              state.checkAll = false;
              state.indeterminate = false;
          } else {
              state.checkAll  = false;
              state.indeterminate = true; //添加一级不确定状态
          }
      }
    return {
      state,
      allChange,
      oneLevelChange,
      secondChange,
      threeChange
    };
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>